<template>
  <div class="carAuditing">
    <c-title :hide="false" :text="'车辆审核'"></c-title>
    <van-tabs v-model="active" title-active-color="#F15353" @change="onChange">
      <van-tab title="车辆申诉审核"></van-tab>
      <van-tab title="特种车辆申请审核"></van-tab>
    </van-tabs>
    <div class="tabArr">
      <div class="tab" :class="status == item.ind ? 'tabSelect' : ''" v-for="(item, ind) in tabArr" :key="ind" @click="tapTab(item.ind)">{{ item.txt }}</div>
    </div>
    <div class="list">
      <template v-if="active == 1">
        <div class="lis" v-for="(item, index) in infoList" :key="index">
          <div class="list_top">
            <div class="list_top_l">{{ item.created_at }}</div>
            <div class="list_top_r">{{ item.status_name }}</div>
          </div>
          <div class="leftTXT" v-if="item.member">会员：<img :src="item.member.avatar" alt="" />{{ item.member.nickname }}</div>
          <div class="leftTXT" v-if="item.group">客群：{{ item.group.group_name }}</div>
          <div class="leftTXT">车牌号：{{ item.license_no }}</div>
          <div class="imgBox">
            <div class="txt">{{ item.group.tip_one }}：</div>
            <div class="imgList">
              <template v-for="(items, ind) in item.work_license_imgs">
                <img :src="items" :key="ind" alt="" />
              </template>
            </div>
          </div>
          <div class="imgBox">
            <div class="txt">{{ item.group.tip_two }}：</div>
            <div class="imgList">
              <template v-for="(items, ind) in item.driving_license_imgs">
                <img :src="items" :key="ind" alt="" />
              </template>
            </div>
          </div>
          <div class="reason" v-if="item.status == '-1'">驳回原因：{{ item.reject_msg }}</div>
          <div class="waitButton" v-if="item.status == '0'">
            <div class="btn btnBorder" @click="rejectTap(item.id)">审核驳回</div>
            <div class="btn" @click="passMethod(item.id)">审核通过</div>
          </div>
        </div>
      </template>
      <template v-if="active == 0">
        <div class="lis" v-for="(item, index) in infoList" :key="index">
          <div class="list_top">
            <div class="list_top_l">{{ item.created_at }}</div>
            <div class="list_top_r">{{ item.status_name }}</div>
          </div>
          <div class="leftTXT">手机号：{{ item.mobile }}</div>
          <div class="leftTXT">车牌号：{{ item.license_no }}</div>
          <div class="leftTXT">来源：{{ item.source_name }}</div>
          <div class="imgBox">
            <div class="txt">身份证：</div>
            <div class="imgList">
              <template v-for="(items, ind) in item.idcard_imgs">
                <img :src="items" :key="ind" alt="" />
              </template>
            </div>
          </div>
          <div class="imgBox">
            <div class="txt">行驶证：</div>
            <div class="imgList">
              <template v-for="(items, ind) in item.driving_permit_imgs">
                <img :src="items" :key="ind" alt="" />
              </template>
            </div>
          </div>
          <div class="reason" v-if="item.status == '-1'">驳回原因：{{ item.reject_msg }}</div>
          <div class="waitButton" v-if="item.status == '0'">
            <div class="btn btnBorder" @click="rejectTap(item.id)">审核驳回</div>
            <div class="btn" @click="passMethod(item.id)">审核通过</div>
          </div>
        </div>
      </template>
      <van-empty :image="emptyImg" description="暂无内容" v-if="infoList.length <= 0" />
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '40%' }" round>
      <van-nav-bar title="审核驳回" @click-left="onClickLeft" @click-right="onClickRight">
        <template #left>
          <span style="color: #999999;">取消</span>
        </template>
        <template #right>
          <span style="color: #000;">确定</span>
        </template>
      </van-nav-bar>
      <div class="inpBox">
        <van-field v-model="Reason" type="textarea" placeholder="请填写驳回原因" />
      </div>
    </van-popup>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      Reason: "",
      show: false,
      active: 0,
      status: "",
      emptyImg: "https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fcar-manage%2FlistNone%402x.png",
      tabArr: [
        {
          txt: "全部",
          ind: ""
        },
        {
          txt: "待审核",
          ind: "0"
        },
        {
          txt: "审核通过",
          ind: "1"
        },
        {
          txt: "审核驳回",
          ind: "-1"
        }
      ],
      infoList: [],
      reject_id: "",
      page: 1,
      total_page: 0,
      isLoadMore: true
    };
  },
  activated() {
    this.getData();
  },
  methods: {
    initGet() {
      this.page = 1;
      this.total_page = 0;
      this.infoList = [];
      this.isLoadMore = true;
    },
    onChange() {
      this.initGet();
      this.status = "";
      this.getData();
    },
    onClickLeft() {
      this.show = false;
      this.reject_id = "";
    },
    onClickRight() {
      this.show = false;
      this.rejectMethod(this.reject_id);
    },
    rejectTap(id) {
      console.log(id);
      this.reject_id = id;
      this.show = true;
    },
    async rejectMethod(id) {
      let urlstr;
      if (this.active == 1) {
        urlstr = "plugin.car-manage.frontend.controllers.manage.special.reject";
      } else {
        urlstr = "plugin.car-manage.frontend.controllers.manage.appeal.reject";
      }
      let { data, msg, result } = await $http.post(urlstr, { id: id, reject_msg: this.Reason }, "");
      if (result) {
        this.initGet();
        this.getData();
        this.reject_id = "";
        this.$toast(msg);
      } else {
        this.$toast(msg);
      }
    },
    async passMethod(id) {
      let urlstr;
      if (this.active == 1) {
        urlstr = "plugin.car-manage.frontend.controllers.manage.special.pass";
      } else {
        urlstr = "plugin.car-manage.frontend.controllers.manage.appeal.pass";
      }
      let { data, msg, result } = await $http.post(urlstr, { id: id }, "");
      console.log(data, msg, result);
      if (result) {
        this.initGet();
        this.getData();
        this.$toast(msg);
      } else {
        this.$toast(msg);
      }
    },
    async getData() {
      let json = {
        search: {
          status: this.status
        }
      };
      let urlstr = "plugin.car-manage.frontend.controllers.manage.special";
      if (this.active == 0) {
        urlstr = "plugin.car-manage.frontend.controllers.manage.appeal";
      }
      let { data, msg, result } = await $http.post(urlstr, json, "");
      if (result) {
        this.infoList = data.data;
        this.total_page = data.last_page;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          search: {
            status: this.status
          },
          page: this.page
        };
        let urlstr = "plugin.car-manage.frontend.controllers.manage.special";
        if (this.active == 0) {
          urlstr = "plugin.car-manage.frontend.controllers.manage.appeal";
        }
        $http
          .get(urlstr, json, "加载中")
          .then(res => {
            this.isLoadMore = true;
            if (res.result == 1) {
              this.infoList = this.infoList.concat(res.data.data);
            } else {
              this.page = this.page - 1;
              this.isLoadMore = false;
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    tapTab(ind) {
      this.status = ind;
      this.initGet();
      this.getData();
    }
  }
};
</script>
<style lang="scss" scoped>
.carAuditing {
  .tabArr {
    display: flex;
    margin: 0.78rem 1.06rem;
    .tab {
      margin-right: 0.63rem;
      font-size: 0.75rem;
      color: #808080;
      padding: 0.34rem 0.69rem;
      line-height: 0.86rem;
      background: #fff;
      border-radius: 0.72rem;
    }
    .tabSelect {
      color: #f15353;
      background: #f5e4e4;
      border: 0.03rem solid #f15353;
    }
  }
  .list {
    padding: 0 0.75rem 2rem 0.75rem;
    box-sizing: border-box;
    .lis {
      background: #ffffff;
      padding: 0.63rem;
      box-sizing: border-box;
      border-radius: 0.5rem;
      margin-top: 0.63rem;
      .waitButton {
        display: flex;
        justify-content: flex-end;
        margin-top: 0.63rem;
        .btn {
          padding: 0.59rem 0.81rem;
          box-sizing: border-box;
          font-size: 0.81rem;
          color: #ffffff;
          box-sizing: border-box;
          border-radius: 1.09rem;
          background: #f15353;
          margin-left: 0.63rem;
        }
        .btnBorder {
          background: #fff;
          border: 0.03rem solid #f15353;
          color: #f15353;
        }
      }
      .leftTXT {
        font-size: 0.88rem;
        line-height: 0.98rem;
        margin-top: 0.94rem;
        display: flex;
        align-items: center;
        img {
          width: 1.25rem;
          height: 1.25rem;
          border-radius: 50%;
          margin: 0;
          margin-right: 0.25rem;
        }
      }
      .imgBox {
        margin-top: 0.94rem;
        .txt {
          font-size: 0.88rem;
          line-height: 0.98rem;
          text-align: left;
        }
        .imgList {
          display: flex;
          flex-wrap: wrap;
          img {
            width: 6.56rem;
            height: 6.56rem;
            border-radius: 0.5rem;
            margin: 0;
            margin-right: 0.5rem;
            margin-top: 0.63rem;
          }
        }
      }
      .reason {
        margin-top: 0.94rem;
        background: #f5f5f5;
        border-radius: 0.5rem;
        padding: 0.66rem 0.63rem;
        box-sizing: border-box;
        font-size: 0.81rem;
        color: #3b3b4a;
        line-height: 0.98rem;
        text-align: left;
      }
      .list_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 0.91rem;
        border-bottom: 1px solid #f5f5f5;
        .list_top_l {
          font-weight: 500;
          font-size: 0.88rem;
          flex: 1;
          text-align: left;
        }
        .list_top_r {
          font-size: 0.81rem;
          color: #f15353;
          flex-shrink: 0;
        }
      }
    }
  }
}
.inpBox {
  padding: 1rem;
  box-sizing: border-box;
}
</style>
